<template>
    <view class=" ">
        <z-paging
            ref="paging"
            v-model="dataList"
            @query="queryList">
            <template #top>
                <tn-navbar>值班管理</tn-navbar>
            </template>
            <view class="tn-bg-card">
                <view class="tn-p-xs tn-mt-xl">
                    <view
                        class="tn-shadow-md tn-p-sm tn-mb tn-radius tn-white_bg"
                        v-for="(item, index) in dataList"
                        :key="index">
                        <!-- 标题 + 操作拦 -->
                        <view class="tn-flex justify-between items-center">
                            <view>{{ item.name }}</view>
                            <view class="tn-flex-column">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="openFormModal('update',item.id)">
                                    <tn-icon
                                        name="edit-write-fill"
                                        size="30"></tn-icon>
                                    编辑
                                </tn-button>
                                <tn-button
                                    class="tn-mt-sm"
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="handleDeleteBefore(item.id)">
                                    <tn-icon
                                        name="delete"
                                        size="30"
                                        color="tn-red"></tn-icon>
                                    删除
                                </tn-button>
                            </view> 
                        </view>
                    </view>
                </view>
            </view>

            <template #loadingMoreNoMore></template>
        </z-paging>

        <view>
            <!-- 悬浮按钮 -->
            <tn-suspend-button
                icon="add"
                size="sm"
                bg-color="tn-gradient-bg__cool-5"
                text-color="tn-white"
                @click="openFormModal('create')" /> 

            <!-- 删除弹框 -->
            <tn-modal ref="modalRef" />
			
			<!-- 编辑弹框 -->
			<FormModal ref="formModalRef"  />
        </view>
    </view>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue";
 
    import { onLoad } from "@dcloudio/uni-app";
    import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
	
	import cfsheep from "@/cfsheep";
	import FormModal from "./modal/duty/index.vue"; 
	
    // ===============模拟数据 =========================
    const filterData = () => {};
    // 模拟数据
    const tempList = ref([]);

    // z-paging 示例
    const paging = ref(null);
    // 数据列表
    const dataList = ref();

    const queryList = (pageNo, pageSize) => {
        // 模拟数据

        for (let i = 0; i < 10; i++) {
            tempList.value.push({
                name: "地面" + i,
                type: "主值班",
                total: 11111,
                residue: 212,
            });
        }
        paging.value.complete(tempList.value);
    };

      
// 表单操作
const formModalRef = ref(); 
const openFormModal = (type: string, id?: number) => {
  formModalRef.value.open(type, id);
}; 
	 
 
 
//  删除ref
const modalRef = ref<TnModalInstance>();
const handleDeleteBefore = (id: String) => {
  modalRef.value?.showModal({
    title: "提示",
    content: "是否删除",
    confirmText: "确定",
    cancelText: "取消",
    showCancel: true,
    cancel: () => {
      return true;
    },
    confirm: () => {
      handleDelete(id);
    },
  });
};
// 删除记录逻辑
const handleDelete = (id: String) => {
 

  paging.value.reload(true);
};
    onLoad(() => {
       
    });
</script>
<style lang="scss" scoped></style>
